<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>收费记录添加</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<style>
.imgs {
	display: none;
}
</style>

</head>
<body>

	<div class="x-body">
		<form class="layui-form layui-form-pane"
			action="${pageContext.request.contextPath}/PayServlet" method="post"
			id="add-form">
			<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<input type="hidden" name="op" value="add">
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>房间号
							</label>
							<div class="layui-input-block">
								<input type="text" name="roomNo" autocomplete="off"
									placeholder=" " class="layui-input" value="" required>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>订单类别
							</label>
							<div class="layui-input-block">
								<select name="payTypeId" id="payTypeId" required="required">
									<option value="0">---请选择订单类型---</option>
									<option value="0">物业费</option>
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label"> <span class='x-red'>*</span>订单金额
							</label>
							<div class="layui-input-block">
								<input type="text" name="payMoney" autocomplete="off"
									class="layui-input" value="">
							</div>
						</div>
						<div class="layui-form-item">
							<button class="layui-btn" type="submit" lay-filter="add"
								lay-submit="">保存</button>
						</div>

						<div style="height: 100px;"></div>
					</div>



				</div>

			</div>
		</form>
	</div>
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>

	<script type="text/javascript" src="js/jquery.js"></script>
	<script src="js/jquery-form.js"></script>
	<script>
		layui.use('form', function() {
			var form = layui.form;
		})
		/* 发起异步请求商品类型列表*/
		$.getJSON("${pageContext.request.contextPath}/PayTypeServlet", {
			op : "find"
		}, function(result, status, xhr) {
			let content = "";
			$.each(result.data, function(i, obj) {
				content += "<option value=\""+obj.typeId+"\">" + obj.typeName
						+ "</option>";
			});
			//填充下拉框中
			$("#payTypeId").html(content);
		});
		//对指定的表单绑定提交事件
		$("#add-form")
				.submit(
						function() {
							//遗留问题，扁担提交之前应该对输入框进行校验，目前我们只是简单必填属性require
							//..
							//使用JQuery.form.js插件方法ajaxSubmit()异步提交表单
							$(this)
									.ajaxSubmit(
											function(result) {//result请求的数据结果
												layui
														.use(
																'layer',
																function() {
																	if (result.status != 0) {
																		//添加商品成功
																		layer
																				.msg(
																						result.message,
																						{
																							icon : 1,
																							time : 5000
																						});
																		//定时器
																		window
																				.setTimeout(
																						function() {
																							//关闭子窗口
																							var index = parent.layer
																									.getFrameIndex(window.name);
																							parent.layer
																									.close(index);
																							//调用首页的查询方法
																							window.parent
																									.pay_search_page();
																						},
																						5000);
																	} else {
																		//添加商品出错
																		layer
																				.msg(
																						result.message,
																						{
																							icon : 5,
																							time : 5000
																						});
																	}

																});

											});
							//限制默认的表单提交
							return false;
						});
	</script>





</body>
</html>